<template>
  <n-layout-header style="padding: 0px; margin: 0px; background: #2c3e50">
    <n-button-group size="large" style="width: 100%">
      <!-- <el-button type="primary" @click="onAddClicked">link.add</el-button> -->
      <n-button color="#2c3e50" text-color="#FFFFF0" @click="onLinkClicked"
        >连接</n-button
      >
      <n-button color="#2c3e50" text-color="#FFFFF0" @click="onInfoClicked"
        >全局信息</n-button
      >
      <n-button color="#2c3e50" text-color="#FFFFF0" @click="onSettingClicked"
        >设置</n-button
      >
      <n-button color="#2c3e50" text-color="#FFFFF0" @click="onAboutClicked"
        >关于</n-button
      >
    </n-button-group>
  </n-layout-header>
</template>

<script>
import IPC from "../background/ipc";
export default {
  name: "VGHeader",
  props: {
    msg: String,
  },
  methods: {
    onLinkClicked() {
      IPC.invoke("window.create", {
        options: {
          title: "连接",
          width: 800,
          height: 600,
          route: "/link",
        },
      }).then((result) => {
        console.log(result);
      });
    },
    onInfoClicked() {
      IPC.invoke("window.create", {
        options: {
          title: "全局信息",
          width: 800,
          height: 600,
          route: "/info",
        },
      }).then((result) => {
        console.log(result);
      });
    },
    onSettingClicked() {
      IPC.invoke("window.create", {
        options: {
          title: "设置",
          width: 800,
          height: 600,
          route: "/setting",
        },
      }).then((result) => {
        console.log(result);
      });
    },
    onAboutClicked() {
      IPC.invoke("window.create", {
        options: {
          title: "关于",
          width: 800,
          height: 600,
          route: "/about",
        },
      }).then((result) => {
        console.log(result);
      });
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
